<template>
  <div class="hello">
    <kp-button @kpChange="change" v-model="checkbox"> button </kp-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { kpButton } from "keep-ui-vue";
export default defineComponent({
  name: "KpButtonDemo",
  components: {
    kpButton,
  },
  setup(props, ctx) {
    console.log(props, ctx);
    const checkbox = ref(false);
    const checkbox2 = ref(false);
    return {
      checkbox,
      checkbox2,
    };
  },
  methods: {
    change(e: any) {
      console.log("change", e);
      // this.checkbox = e;
    },
    blur(e: any) {
      console.log("blur", e);
    },
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
